<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
<title>Emoji Support - Huanghs blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=1">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png?v=1">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png?v=1">
  <link rel="manifest" href="/favicon/site.webmanifest?v=1">
  
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v=1" color="#ffffff">
    <link rel="shortcut icon" href="/favicon/favicon.ico?v=1">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml?v=1">
  
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">

<meta name="generator" content="Hugo 0.66.0" /><meta itemprop="name" content="Emoji Support">
<meta itemprop="description" content="Guide to emoji usage in Hugo">
<meta itemprop="datePublished" content="2019-03-05T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2019-03-05T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="124">
<meta itemprop="image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg">



<meta itemprop="keywords" content="emoji," /><meta property="og:title" content="Emoji Support" />
<meta property="og:description" content="Guide to emoji usage in Hugo" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://hhs44.github.io/en/blog/emoji-support/" />
<meta property="og:image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" />
<meta property="article:published_time" content="2019-03-05T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-03-05T00:00:00+00:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg"/>

<meta name="twitter:title" content="Emoji Support"/>
<meta name="twitter:description" content="Guide to emoji usage in Hugo"/>
<meta name="twitter:site" content="@example"/>
<link rel="stylesheet" href="/css/bundle.min.b2b2abee095149a60c0a1a2c4fab4b7c140b32ca88abc3d2f83d0dd903b6f634.css" integrity="sha256-srKr7glRSaYMChosT6tLfBQLMsqIq8PS&#43;D0N2QO29jQ=">
        <link rel="stylesheet" href="/css/add-on.css">

</head>

  <body>
    
<header id="site-header">
  <nav id="site-nav">
    <h1 class="nav-title">
      <a href="/en/">
        
          
            Blog
          
        
      </a>
    </h1>
    <menu id="site-nav-menu" class="flyout-menu">
      
        
          
          
            <a href="/en/" class="link"><i class='fa fa-home'></i> 首页</a>
          
        
      
        
          
          
            <a href="/en/blog/" class="link"><i class='far fa-newspaper'></i> 博客</a>
          
        
      
        
          
          
            <a href="/en/categories/" class="link"><i class='fas fa-sitemap'></i> 分类</a>
          
        
      
        
          
          
            <a href="/en/tags/" class="link"><i class='far fa-envelope'></i> 标签</a>
          
        
      
        
          
          
            <a href="/en/about/" class="link"><i class='far fa-id-card'></i> 关于</a>
          
        
      
      <a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt">&nbsp;</i>Share</a>
      

    </menu>
    

    <a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt fa-2x">&nbsp;</i></a>
    <a href="#lang-menu" class="lang-toggle" lang="en">en</a>
    <a href="#site-nav" class="nav-toggle"><i class="fas fa-bars fa-2x"></i></a>
  </nav>
  <menu id="lang-menu" class="flyout-menu">
  <a href="#" lang="en" class="link active">English (en)</a>
  
    
      
    
      
        <a href="/zh-cn" lang="zh-cn" class="no-lang link">中文 (zh-cn)</a>
      
    
  
</menu>

  
    <menu id="share-menu" class="flyout-menu">
      <h1>Share Post</h1>
      





    </menu>
  
</header>


    <div id="wrapper">
      <section id="site-intro">
  <a href="/en/"><img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/head.jpg" class="circle" width="" alt="huang`s blog " /></a>
  <header>
    <h1>Huanghs的个人博客 </h1>
  </header>
  <main>
    <p>不写下一些东西，就没法证明自己<br> 不多走一些路，就没法看到更多的风景</p>
  </main>
  
    <footer>
      <ul class="socnet-icons">
        

        <li><a href="//github.com/hhs44/hhs44.github.io" target="_blank" rel="noopener" title="GitHub" class="fab fa-github"></a></li>






<li><a href="//flickr.com/photos/example" target="_blank" rel="noopener" title="Flickr" class="fab fa-flickr"></a></li>




<li><a href="//linkedin.com/in/example" target="_blank" rel="noopener" title="LinkedIn" class="fab fa-linkedin"></a></li>
<li><a href="//linkedin.com/company/examplebusiness" target="_blank" rel="noopener" title="LinkedIn Company" class="fab fa-linkedin"></a></li>



<li><a href="//facebook.com/example" target="_blank" rel="noopener" title="Facebook" class="fab fa-facebook"></a></li>
<li><a href="//reddit.com/user/example" target="_blank" rel="noopener" title="Reddit" class="fab fa-reddit"></a></li>





<li><a href="weixin://contacts/profile/22" target="_blank" rel="noopener" title="WeChat" class="fab fa-weixin"></a></li>
<li><a href="//wpa.qq.com/msgrd?v=3&amp;uin=1159986871&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener" title="QQ" class="fab fa-qq"></a></li>
<li><a href="//instagram.com/example" target="_blank" rel="noopener" title="Instagram" class="fab fa-instagram"></a></li>

<li><a href="//twitter.com/example" target="_blank" rel="noopener" title="Twitter" class="fab fa-twitter"></a></li>


<li><a href="//pinterest.com/example" target="_blank" rel="noopener" title="Pinterest" class="fab fa-pinterest-p"></a></li>
<li><a href="//telegram.me/example" target="_blank" rel="noopener" title="telegram" class="fab fa-telegram"></a></li>



<li><a href="//researchgate.net/profile/example" target="_blank" rel="noopener" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>
<li><a href="//keybase.io/example" target="_blank" rel="noopener" title="keybase" class="fab fa-keybase"></a></li>
<li><a href="//example.com/@example" target="_blank" rel="noopener" title="mastodon" class="fab fa-mastodon"></a></li>
<li><a href="mailto:1159986871@qq.com" target="_blank" title="Email" class="far fa-envelope"></a></li>

      </ul>
    </footer>
  
</section>


      <main id="site-main">
        <article class="post">
  <header>
  <div class="title">
    
        <h2><a href="/en/blog/emoji-support/">Emoji Support</a></h2>
    
    
        <p>Guide to emoji usage in Hugo</p>
    
</div>
  <div class="meta">
    <time class="published" datetime="2019-03-05 00:00:00 &#43;0000 UTC">
      March 5, 2019
    </time>
    <span class="author">Hugo Authors</span>
    
      <p>1 minute read</p>
    
  </div>
</header>

  <section id="socnet-share">
    





  </section>
  
  <a href="/en/blog/emoji-support/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


  <div class="content">
    <p>Emoji can be enabled in a Hugo project in a number of ways.</p>
<p>The <a href="https://gohugo.io/functions/emojify/"><code>emojify</code></a> function can be called directly in templates or <a href="https://gohugo.io/templates/shortcode-templates/#inline-shortcodes">Inline Shortcodes</a>.</p>
<p>To enable emoji globally, set <code>enableEmoji</code> to <code>true</code> in your site’s <a href="https://gohugo.io/getting-started/configuration/">configuration</a> and then you can type emoji shorthand codes directly in content files; e.g.</p>
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
<br>
<p>The <a href="http://www.emoji-cheat-sheet.com/">Emoji cheat sheet</a> is a useful reference for emoji shorthand codes.</p>
<hr />
<p><strong>N.B.</strong> The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">.emoji {
font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
}</code></pre></div>
  </div>
  <footer>
    <ul class="stats">
  
    
    
      <li class="categories">
        <ul>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/en/categories/"></a></li>
          
        </ul>
      </li>
    
  
  
    
    
      <li class="tags">
        <ul>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/en/tags/emoji">emoji</a></li>
          
        </ul>
      </li>
    
  
</ul>

  </footer>
</article>

    <article class="post">
      
<div>
  <h2>Say something</h2>
    <form id="post-js-form" class="post-new-comment" method="POST">
      
      <h5 class='post-reply-notice hidden'>
        <span class='post-reply-arrow'></span><span class='post-reply-name'></span>
      </h5>

      
      <input type="hidden" name="options[entryId]" value="258344ebaf1c45df3462af05d2892c97">
      <input type='hidden' name='fields[replyThread]' value=''>
      <input type='hidden' name='fields[replyID]' value=''>
      <input type='hidden' name='fields[replyName]' value=''>

      
      <input required name='fields[name]' type='text' placeholder='Your name (Required)'>
      <input name='fields[website]' type='text' placeholder='Your website'>
      <input required name='fields[email]' type='email' placeholder='Your email address (Required for Gravatar)'>
      <textarea required name='fields[body]' placeholder='Your message. Feel free to use Markdown (Google &#39;Markdown Cheat Sheet&#39;).' rows='10'></textarea>

      
      

      
      <p class='post-submit-notice'>
        <strong class='post-submit-notice-text submit-success hidden'>Thanks for your comment! It will be shown on the site once it has been approved.</strong>
        <strong class='post-submit-notice-text submit-failed hidden'>Sorry, there was an error with your submission.  Please make sure all required fields have been completed and try again.</strong>
      </p>

      
      <input type='submit' value='Submit' class='button'>
      <input type='submit' value='Submitted' class='hidden button' disabled>
      <input type='reset' value='Reset' class='button'>
    </form>
</div>


<div>
  <h2>Comments</h2>

  
    
      <p>Nothing yet.</p>
    
  
</div>

    </article>


<div class="pagination">
  
  
    <a href="/en/blog/placeholder-text/" class="button"><div class="next"><div>Placeholder Text</div></div></a>
  
</div>


      </main>
      <div class="post-toc">
     
    <aside>
        <header>
        <h4>Emoji Support的字数: 124</h4> 
        </header><nav id="TableOfContents"></nav></aside>
    <a href="#" id="toc-toggle"></a>
     
</div>
      <section id="site-sidebar">
  
    <section id="recent-posts">
      <header>
        <h1>Recent posts</h1>
      </header>
      
      <article class="mini-post">
        <section>
          
  <a href="/en/blog/markdown-reference-/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/en/blog/markdown-reference-/">Markdown For Typora</a></h1>
          <time class="published" datetime="">March 12, 2020</time>
        </header>
      </article>
      
      <article class="mini-post">
        <section>
          
  <a href="/en/blog/markdown-syntax/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/en/blog/markdown-syntax/">Markdown语法指南</a></h1>
          <time class="published" datetime="">March 11, 2020</time>
        </header>
      </article>
      
      <article class="mini-post">
        <section>
          
  <a href="/en/blog/placeholder-text/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/pic02.jpg" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/en/blog/placeholder-text/">Placeholder Text</a></h1>
          <time class="published" datetime="">March 9, 2019</time>
        </header>
      </article>
      
      
        <a href="/en/blog/" class="button">See more</a>
      
    </section>
  

  
    
      <section id="categories">
        <header>
          <h1><a href="/en/categories">Categories</a></h1>
        </header>
        <ul>
          
            
          
          
          <li>
            
              <a href="/en/categories/syntax/">syntax<span class="count">2</span></a>
            
          
          <li>
            
              <a href="/en/categories/themes/">themes<span class="count">1</span></a>
            
          
          </li>
        </ul>
      </section>
    
  

  
    <section id="mini-bio">
      <header>
        <h1>About</h1>
      </header>
      <p>test</p>
      <footer>
        <a href="/en/about" class="button">Learn More</a>
      </footer>
    </section>
  
</section>

      <footer id="site-footer">
  
      <ul class="socnet-icons">
        

        <li><a href="//github.com/hhs44/hhs44.github.io" target="_blank" rel="noopener" title="GitHub" class="fab fa-github"></a></li>






<li><a href="//flickr.com/photos/example" target="_blank" rel="noopener" title="Flickr" class="fab fa-flickr"></a></li>




<li><a href="//linkedin.com/in/example" target="_blank" rel="noopener" title="LinkedIn" class="fab fa-linkedin"></a></li>
<li><a href="//linkedin.com/company/examplebusiness" target="_blank" rel="noopener" title="LinkedIn Company" class="fab fa-linkedin"></a></li>



<li><a href="//facebook.com/example" target="_blank" rel="noopener" title="Facebook" class="fab fa-facebook"></a></li>
<li><a href="//reddit.com/user/example" target="_blank" rel="noopener" title="Reddit" class="fab fa-reddit"></a></li>





<li><a href="weixin://contacts/profile/22" target="_blank" rel="noopener" title="WeChat" class="fab fa-weixin"></a></li>
<li><a href="//wpa.qq.com/msgrd?v=3&amp;uin=1159986871&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener" title="QQ" class="fab fa-qq"></a></li>
<li><a href="//instagram.com/example" target="_blank" rel="noopener" title="Instagram" class="fab fa-instagram"></a></li>

<li><a href="//twitter.com/example" target="_blank" rel="noopener" title="Twitter" class="fab fa-twitter"></a></li>


<li><a href="//pinterest.com/example" target="_blank" rel="noopener" title="Pinterest" class="fab fa-pinterest-p"></a></li>
<li><a href="//telegram.me/example" target="_blank" rel="noopener" title="telegram" class="fab fa-telegram"></a></li>



<li><a href="//researchgate.net/profile/example" target="_blank" rel="noopener" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>
<li><a href="//keybase.io/example" target="_blank" rel="noopener" title="keybase" class="fab fa-keybase"></a></li>
<li><a href="//example.com/@example" target="_blank" rel="noopener" title="mastodon" class="fab fa-mastodon"></a></li>
<li><a href="mailto:1159986871@qq.com" target="_blank" title="Email" class="far fa-envelope"></a></li>

      </ul>
  
  <p class="copyright">
    
      &copy; 2020
      
        Huanghs blog
      
    . <br>
    Theme: <a href='https://github.com/pacollins/hugo-future-imperfect-slim' target='_blank' rel='noopener'>Hugo Future Imperfect Slim</a><br>A <a href='https://html5up.net/future-imperfect' target='_blank' rel='noopener'>HTML5 UP port</a> | Powered by <a href='https://gohugo.io/' title='0.66.0' target='_blank' rel='noopener'>Hugo</a>
  </p>
</footer>
<a id="back-to-top" href="#" class="fas fa-arrow-up fa-2x"></a>

      <script src="/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script><script src="/js/bundle.min.b17fef5a58c033a8a59f57c83aa975a251aecff921cbd36c12e975d530fa023b.js" integrity="sha256-sX/vWljAM6iln1fIOql1olGuz/khy9NsEul11TD6Ajs="></script>
    <script src="/js/add-on.js"></script>
    </div>
  </body>
</html>
